<template>
	<view class="app-container">
		<!-- 全局顶部导航 -->
		<!-- <global-top-nav :navTransparent="navTransparent" title="纤程旅行" :showTitle="navTransparent <= 50" /> -->


		<!-- 使用uview的导航栏组件 -->
		<up-navbar bgColor="#fff" title=" " titleStyle="color: #ffffff; font-size: 36rpx; font-weight: bold"
			:safeAreaInsetTop="true" :height="navbarHeightRpx" :customStyle="navbarContentStyle">
			<template #left>
				<view class="nav-left" :style="navLeftStyle" @click="handleLocationClick">
					<FontIcon name="icon-address" :size="28" color="#000000"></FontIcon>
					<text class="nav-location-text">{{ currentAddress || '定位中...' }}</text>
				</view>
			</template>
			<template #center>
				<view class="nav-center" :style="navCenterStyle">
					<!-- 标题区域可以在这里添加 -->
				</view>
			</template>
			<template #right>
				<view class="nav-right" :style="navRightStyle">
					<view class="nav-action-btn nav-action-btn-circle" @click="handleSearch">
						<up-icon name="search" size="16" color="#000000"></up-icon>
					</view>
					<view class="nav-action-btn nav-action-btn-rect" @click="handleMap">
						<up-icon name="map" size="16" color="#000000"></up-icon>
						<text class="nav-action-text">地图</text>
					</view>
				</view>
			</template>
		</up-navbar>

		<!-- 内容区域 -->
		<view class="content-wrapper" @scroll="handleScroll">
			<!-- 安全距离块 -->
			<view class="safe-area" :style="{ height: safeAreaHeightRpx + 'rpx' }"></view>

			<!-- 错误状态 -->
			<view v-if="hasError" class="error-container">
				<u-icon name="error" size="80" color="#999"></u-icon>
				<text class="error-text">加载失败，请重试</text>
				<u-button @click="loadPageData()" type="primary" size="default">重试</u-button>
			</view>

			<!-- 正常内容 -->
			<view v-else class="home-page">
				<!-- 轮播图 -->
				<view class="banner-section card">
					<swiper class="banner-swiper" @change="onBannerChange" @circular="true" circular indicator-dots
						indicator-active-color="#fff" indicator-color="rgba(255,255,255,.5)">
						<swiper-item v-for="(banner, index) in bannerList" :key="index">
							<image :src="banner.imageUrl" mode="aspectFill" class="banner-image"
								@click="onBannerClick(banner)">
							</image>
						</swiper-item>
					</swiper>
				</view>
				<!-- 商品列表 - 使用ProductCard组件 -->
				<view class="products-container">
					<!-- 添加额外的包裹元素并将v-for移到这里 -->
					<view v-for="product in categoryProducts" :key="product.id" class="product-it"
						@click="onProductClick(product.mainInfo.productSpu.id)">
						<!-- 商家标题部分 -->
						<view class="section-title-box bg-yellow flex-row-between">
							<view class="flex-row-start">
								<text class="section-title-text" @tap="goshop(product.mainInfo.productSpu.id)">{{
									product.mainInfo.shopName }}</text>
								<view class="u-font-24 u-m-l-20 color-aaa">({{ product.mainInfo.branchName }})</view>
								<u-icon name="arrow-right" size="11" color="#a0a0a0"></u-icon>
							</view>
							<view class="u-font-26 color-666">987m</view>
						</view>
						<!-- 产品组件 -->
						<product-card :info="product" :show-top-info="false" :show-date-select="true"></product-card>
					</view>
				</view>

				<!-- <view class="products-container">
					
					<view v-for="product in categoryProducts" :key="product.id" class="product-it"
						@click="onProductClick(product.mainInfo.productSpu.id)">
						
						<view class="section-title-box bg-green flex-row-between">
							<view class="flex-row-start">
								<text class="section-title-text">旅行社</text>
								<view class="u-font-24 u-m-l-20 color-aaa">大学路校</view>
								<u-icon name="arrow-right" size="11" color="#a0a0a0"></u-icon>
							</view>
							<view class="u-font-26 color-666">1.5km</view>
						</view>
						
						<product-card :info="product" :show-top-info="false" :show-date-select="true"></product-card>
					</view>
				</view> -->

				<!-- 热门产品 -->
				<!-- <view class="hot-products-section">
					<view class="section-title-box">
						<text class="section-title-text">热门产品</text>
					</view>
					<view class="hot-products-grid">
						<view class="hot-product-card" v-for="(product, index) in recommendList.slice(0, 4)"
							:key="index" @click="onProductClick(product.id)">
							<image :src="product.mainImage || product.imageUrl" mode="aspectFill"
								class="hot-product-image">
							</image>
							<view class="hot-product-info">
								<text class="hot-product-title">{{ product.name }}</text>
								<view class="hot-product-tags">
									<text class="hot-tag green">郑州接送</text>
									<text class="hot-tag blue">周末营</text>
								</view>
								<text class="hot-product-price">¥ {{ product.price }}</text>
							</view>
						</view>
					</view>
				</view> -->

				<!-- 科学探索 -->
				<!-- <view class="explore-section">
					<view class="section-title-box">
						<text class="section-title-text">科学探索</text>
					</view>
					<view class="explore-grid">
						<view class="explore-item" v-for="(category, index) in scientificCategories" :key="index"
							@click="onCategoryClick(category)">
							<image :src="category.iconUrl" mode="aspectFill" class="explore-image"></image>
							<text class="explore-name">{{ category.name }}</text>
						</view>
					</view>
				</view> -->

				<!-- 户外活动 -->
				<!-- <view class="explore-section">
					<view class="section-title-box">
						<text class="section-title-text">户外活动</text>
					</view>
					<view class="explore-grid">
						<view class="explore-item" v-for="(category, index) in outdoorCategories" :key="index"
							@click="onCategoryClick(category)">
							<image :src="category.iconUrl" mode="aspectFill" class="explore-image"></image>
							<text class="explore-name">{{ category.name }}</text>
						</view>
					</view>
				</view> -->
				<!-- 历史人文 -->
				<!-- <view class="explore-section">
					<view class="section-title-box">
						<text class="section-title-text">历史人文</text>
					</view>
					<view class="explore-grid">
						<view class="explore-item" v-for="(category, index) in historyCategories" :key="index"
							@click="onCategoryClick(category)">
							<image :src="category.iconUrl" mode="aspectFill" class="explore-image"></image>
							<text class="explore-name">{{ category.name }}</text>
						</view>
					</view>
				</view> -->
				<!-- 博物讲解 -->
				<!-- <view class="explore-section">
					<view class="section-title-box">
						<text class="section-title-text">博物讲解</text>
					</view>
					<view class="explore-grid">
						<view class="explore-item" v-for="(category, index) in museumCategories" :key="index"
							@click="onCategoryClick(category)">
							<image :src="category.iconUrl" mode="aspectFill" class="explore-image"></image>
							<text class="explore-name">{{ category.name }}</text>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<!-- 自定义tabbar -->
		<CustomTabBar></CustomTabBar>
	</view>
</template>

<script>
import { updateTabBarSelected } from '@/utils/tabBarUtil';
import GlobalTopNav from '@/components/GlobalTopNav.vue';
import ProductCard from '@/components/ProductCard.vue';
import CustomTabBar from '@/components/CustomTabBar.vue';
import { request } from '@/utils/request.js';
import { mergeAllProducts } from '@/utils/productUtil.js';
import {
	getProductList,
} from '@/api/index.js';
import { useUserStore } from '@/store';

// 图片地址常量
const IMAGE_URL = 'https://cangqiong-kda.oss-cn-beijing.aliyuncs.com/u186.png';

export default {
	components: {
		GlobalTopNav,
		ProductCard,
		CustomTabBar
	},
	data() {
		return {
			GM_STATUS_BAR_HEIGHT: uni.getStorageSync('GM_STATUS_BAR_HEIGHT'),
			// 胶囊按钮相关
			navRightPadding: '200rpx', // 动态计算的右侧边距
			capsuleInfo: {}, // 胶囊按钮信息（完整信息）
			statusBarHeight: 0, // 状态栏高度（px）
			navbarHeight: 44, // 导航栏高度（px）
			systemInfo: {}, // 系统信息，用于机型适配
			// 状态管理
			isLoading: true,
			hasError: false,
			navTransparent: 0,
			productId: '',

			// 轮播图数据
			bannerList: [
				{
					imageUrl: 'https://big-event-kda.oss-cn-beijing.aliyuncs.com/wjj/l2.jpg'
				},
				{
					imageUrl: 'https://big-event-kda.oss-cn-beijing.aliyuncs.com/wjj/q1.jpg'
				},
				{
					imageUrl: 'https://big-event-kda.oss-cn-beijing.aliyuncs.com/wjj/l3.jpg'

				}
			],
			currentBannerIndex: 0,

			// 分类数据
			categoryList: [],
			// 科学探索分类
			scientificCategories: [],
			// 户外活动分类
			outdoorCategories: [],
			//历史人文
			historyCategories: [],
			//博物讲解
			museumCategories: [],
			// 分类商品列表
			categoryProducts: [],

			// 推荐数据
			recommendTabs: [
				{ id: 'all', name: '全部' },
				{ id: 'new', name: '新品' },
				{ id: 'hot', name: '热销' },
				{ id: 'discount', name: '优惠' }
			],
			currentTab: 'all',
			currentPage: 1,
			recommendList: [],
			hasMoreData: true,
			pageNum: 1,
			pageSize: 10,

			// 品牌数据
			brandBanner: {},
			brandList: [],
			
			// 当前位置信息
		currentAddress: '郑州市二七区'
		};
	},
	computed: {
		// 导航栏右侧样式
		navRightStyle() {
			// 参照 AdaptiveNavBar 的方式，使用胶囊按钮高度
			const capsuleHeight = (this.capsuleInfo && this.capsuleInfo.height) ? this.capsuleInfo.height : 32;

			return {
				marginRight: this.navRightPadding,
				height: capsuleHeight + 'px',
				display: 'flex',
				alignItems: 'center',
				justifyContent: 'flex-end'
			};
		},
		// 导航栏左侧样式（与胶囊按钮对齐）
		navLeftStyle() {
			// 参照 AdaptiveNavBar 的方式，使用胶囊按钮高度
			const capsuleHeight = (this.capsuleInfo && this.capsuleInfo.height) ? this.capsuleInfo.height : 32;

			return {
				height: capsuleHeight + 'px',
				lineHeight: capsuleHeight + 'px',
				display: 'flex',
				alignItems: 'center',
				justifyContent: 'flex-start'
			};
		},
		// 导航栏中间样式（与胶囊按钮对齐）
		navCenterStyle() {
			// 参照 AdaptiveNavBar 的方式，使用胶囊按钮高度
			const capsuleHeight = (this.capsuleInfo && this.capsuleInfo.height) ? this.capsuleInfo.height : 32;

			return {
				height: capsuleHeight + 'px',
				lineHeight: capsuleHeight + 'px',
				display: 'flex',
				alignItems: 'center',
				justifyContent: 'center'
			};
		},
		// u-navbar__content 样式（与胶囊按钮上下居中，适配不同机型）
		navbarContentStyle() {
			try {
				// 如果还没有初始化系统信息，先初始化
				if (!this.systemInfo || Object.keys(this.systemInfo).length === 0) {
					this.initSystemInfo();
				}

				if (!this.capsuleInfo || !this.capsuleInfo.height || !this.capsuleInfo.top) {
					// 如果获取不到胶囊按钮信息，使用默认值
					return {
						height: this.navbarHeight + 'px',
						display: 'flex',
						alignItems: 'center',
						justifyContent: 'space-between'
					};
				}

				// 参照 AdaptiveNavBar 的方式，计算胶囊按钮的垂直位置（相对于导航栏内容区域）
				// 胶囊按钮的 top 是相对于窗口的，需要减去状态栏高度
				const capsuleTopOffset = this.capsuleInfo.top - this.statusBarHeight;

				// 通过 paddingTop 和 paddingBottom 来调整内容区域的垂直对齐
				// 使内容区域与胶囊按钮在同一水平线上
				return {
					height: this.navbarHeight + 'px',
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'space-between',
					paddingTop: capsuleTopOffset + 'px',
					paddingBottom: capsuleTopOffset + 'px',
					boxSizing: 'border-box'
				};
			} catch (e) {
				console.warn('计算导航栏内容样式失败:', e);
				return {
					height: this.navbarHeight + 'px',
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'space-between'
				};
			}
		},
		// 导航栏高度（rpx），参照 AdaptiveNavBar 的计算方式
		navbarHeightRpx() {
			try {
				if (!this.systemInfo || Object.keys(this.systemInfo).length === 0) {
					this.initSystemInfo();
				}

				const systemInfo = this.systemInfo;
				const windowWidthPx = systemInfo.windowWidth || 375;
				const pixelRatio = 750 / windowWidthPx;

				// 将导航栏高度（px）转换为 rpx
				return (this.navbarHeight * pixelRatio) + 'rpx';
			} catch (e) {
				console.warn('计算导航栏高度失败:', e);
				return '88rpx'; // 默认值
			}
		},
		// 安全区域高度（rpx），状态栏高度 + 导航栏高度
		safeAreaHeightRpx() {
			try {
				const statusBarHeight = this.GM_STATUS_BAR_HEIGHT || 0;

				if (!this.systemInfo || Object.keys(this.systemInfo).length === 0) {
					this.initSystemInfo();
				}

				const systemInfo = this.systemInfo;
				const windowWidthPx = systemInfo.windowWidth || 375;
				const pixelRatio = 750 / windowWidthPx;

				// 将 px 转换为 rpx
				const navbarHeightRpx = this.navbarHeight * pixelRatio;

				return statusBarHeight + navbarHeightRpx;
			} catch (e) {
				console.warn('计算安全区域高度失败:', e);
				return (this.GM_STATUS_BAR_HEIGHT || 0) + 88; // 默认值
			}
		}
	},
	onLoad() {
		// 页面加载时的逻辑
		console.log('页面加载');
		//清除companyInfo信息并重置用户角色为普通用户
		this.clearCompanyInfo();
		this.resetUserRole();

		// 初始化系统信息（用于机型适配）
		this.initSystemInfo();
	},
	mounted() {
		// 延迟计算，确保胶囊按钮信息已加载
		this.$nextTick(() => {
			setTimeout(() => {
				this.calculateNavRightPadding();
			}, 200);
		});

		// 监听窗口大小变化（适配横竖屏切换等）
		try {
			uni.onWindowResize(() => {
				console.log('窗口大小变化，重新计算导航栏');
				this.initSystemInfo();
				this.calculateNavRightPadding();
			});
		} catch (e) {
			console.warn('监听窗口大小变化失败（可能不支持）:', e);
		}
	},
	onReady() {
		// 页面渲染完成后再次计算，确保能获取到胶囊按钮信息
		this.$nextTick(() => {
			setTimeout(() => {
				this.calculateNavRightPadding();
			}, 300);
		});
	},
	onShow() {
		// 隐藏原生 tabbar，显示自定义 tabbar
		try {
			uni.hideTabBar({ animation: false });
		} catch (e) {
			// 忽略错误
		}
		// 设置当前tabBar选中项
		updateTabBarSelected.call(this, 0);
		// 重新计算导航栏右侧边距（页面显示时）
		this.calculateNavRightPadding();

		this.loadCategoryProducts();
	},
	onReady() {
		// 页面初次渲染完成时加载数据
		this.loadPageData();
	},
	onHide() {
		// 页面隐藏时的逻辑
		console.log('页面隐藏');
	},
	onUnload() {
		// 清理工作
		console.log('页面卸载');
	},
	onPullDownRefresh() {
		// 重新加载页面数据
		this.loadPageData().then(() => {
			// 结束下拉刷新动画
			uni.stopPullDownRefresh();
		});
	},
	onReachBottom() {
		// 上拉加载更多逻辑
		if (this.hasMoreData) {
			this.loadMoreData();
		}
	},
	methods: {
		goshop(id) {
			uni.navigateTo({
				url: `/public/merchant/shop2/index?spuId=${id}`
			})
		},
		/**
		 * 加载页面数据
		 * 采用Promise.all并行加载多种数据，提升页面加载速度
		 */
		async loadPageData() {
			try {
				this.isLoading = true;
				this.hasError = false;

				// 并行加载不同类型的数据
				await Promise.all([
					this.loadBannerData(),
					this.loadCategoryData(),
					this.loadRecommendProductsByTab('all'),
					this.loadBrandData()
				]);
			} catch (error) {
				console.error('加载页面数据失败:', error);
				this.hasError = true;
			} finally {
				this.isLoading = false;
			}
		},
		/**
 * 加载商品
 */
		async loadCategoryProducts() {
			// 显示加载动画
			uni.showLoading({
				title: '加载中...'
			});

			try {
				// 调用实际的API获取产品数据
				const response = await request({
					url: '/product-spu/getListByUser',
					method: 'GET',
				});
				// 检查响应数据
				if (response.code === 200 && Array.isArray(response.data)) {
					//如果只有一条数据，则用1条
					//如果是两条及以上，则用2条
					console.log('response.data', response.data);
					let firstTwoProducts = [];
					if (response.data.length === 1) {
						firstTwoProducts = [response.data[0]];
					} else if (response.data.length >= 2) {
						firstTwoProducts = response.data.slice(0, 2);
					}
					// 使用productUtil.js处理数据
					// 🔑 用户端不传固定的productType，让mergeAllProducts从每个产品数据中自动提取
					// 这样可以确保：用户看到的是B3的产品（p3数据，productType=5）

					const processedProducts = mergeAllProducts(firstTwoProducts);

					// 更新商品列表 - 直接使用processedProducts
					if (this.currentPage === 1) {
						this.categoryProducts = processedProducts;
					} else {
						this.categoryProducts = [...this.categoryProducts, ...processedProducts];
					}
					console.log('商品列表', processedProducts);
					// 判断是否还有更多数据
					this.hasMoreProducts = processedProducts.length === 2;
				} else {
					// 处理API返回错误
					uni.showToast({
						title: '数据加载失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('加载商品数据失败:', error);
				uni.showToast({
					title: '网络请求失败',
					icon: 'none'
				});
			} finally {
				// 隐藏加载动画
				uni.hideLoading();
			}
		},

		/**
		 * 加载轮播图数据
		 */
		async loadBannerData() {
			// 模拟数据加载
			await new Promise(resolve => setTimeout(resolve, 500));

		},

		/**
		 * 加载分类数据
		 */
		async loadCategoryData() {
			// 模拟数据加载
			await new Promise(resolve => setTimeout(resolve, 300));

			// 科学探索分类
			this.scientificCategories = [
				{ id: 1, name: '航空航天', iconUrl: IMAGE_URL },
				{ id: 2, name: '天文科学', iconUrl: IMAGE_URL },
				{ id: 3, name: '工业设备', iconUrl: IMAGE_URL },
				{ id: 4, name: '人工智能', iconUrl: IMAGE_URL }
			];

			// 户外活动分类
			this.outdoorCategories = [
				{ id: 5, name: '亲近自然', iconUrl: IMAGE_URL },
				{ id: 6, name: '采摘捕捞', iconUrl: IMAGE_URL },
				{ id: 7, name: '自然科普', iconUrl: IMAGE_URL },
				{ id: 8, name: '生存训练', iconUrl: IMAGE_URL }
			];
			//历史人文
			this.historyCategories = [
				{ id: 9, name: '历史遗迹', iconUrl: IMAGE_URL },
				{ id: 10, name: '非遗民宿', iconUrl: IMAGE_URL },
				{ id: 10, name: '文化', iconUrl: IMAGE_URL },
				{ id: 10, name: '生存训练', iconUrl: IMAGE_URL },
			]
			//博物讲解
			this.museumCategories = [
				{ id: 11, name: '河南博物院', iconUrl: IMAGE_URL },
				{ id: 12, name: '郑州商都遗址', iconUrl: IMAGE_URL },
				{ id: 13, name: '东城桓遗址', iconUrl: IMAGE_URL },
				{ id: 14, name: '郑州博物馆', iconUrl: IMAGE_URL }
			]

			// 合并到categoryList（保持兼容性）
			this.categoryList = [...this.scientificCategories, ...this.outdoorCategories];
		},

		/**
		 * 加载品牌数据
		 */
		async loadBrandData() {
			// 模拟数据加载
			await new Promise(resolve => setTimeout(resolve, 400));
			this.brandBanner = {
				id: 1, imageUrl: IMAGE_URL, link: '/pages/brand/list'
			};

			this.brandList = [
				{ id: 1, name: '品牌A', logoUrl: IMAGE_URL },
				{ id: 2, name: '品牌B', logoUrl: IMAGE_URL },
				{ id: 3, name: '品牌C', logoUrl: IMAGE_URL },
				{ id: 4, name: '品牌D', logoUrl: IMAGE_URL }
			];
		},
		async clearCompanyInfo() {
			uni.removeStorageSync('companyInfo');
		},
		// 重置用户角色为普通用户
		resetUserRole() {
			try {
				const userStore = useUserStore();
				if (userStore) {
					// 将角色设置为普通用户
					userStore.setRole('user');
					console.log('用户角色已重置为普通用户');
				}
			} catch (error) {
				console.error('重置用户角色失败:', error);
			}
		},

		/**
		 * 加载更多推荐商品
		 */
		async loadMoreData() {
			if (this.isLoading || !this.hasMoreData) return;

			try {
				this.isLoading = true;
				this.pageNum++;

				// 加载更多数据时，同样只调用用户产品API
				const userProducts = await getProductList();
				console.log('userProducts', userProducts);
				let productData = userProducts.data || [];

				// 根据当前tab应用相同的排序和过滤逻辑
				switch (this.currentTab) {
					case 'all':
						// 显示所有用户可见的产品
						break;
					case 'new':
						productData = this.sortProductsByDate(productData, 'new');
						break;
					case 'hot':
						productData = this.sortProductsByPopularity(productData);
						break;
					case 'discount':
						productData = this.filterDiscountProducts(productData);
						break;
				}

				const newProducts = this.formatProductData(productData);

				if (newProducts.length > 0) {
					// 去重处理，避免重复数据
					const existingIds = this.recommendList.map(item => item.id);
					const filteredProducts = newProducts.filter(product => !existingIds.includes(product.id));

					if (filteredProducts.length > 0) {
						this.recommendList = [...this.recommendList, ...filteredProducts];
						console.log('推荐列表', this.recommendList);
					} else {
						this.hasMoreData = false;
					}
				} else {
					this.hasMoreData = false;
				}

			} catch (error) {
				console.error('加载更多数据失败:', error);
				// 失败时使用模拟数据作为备选
				const newProducts = this.generateRecommendProducts(this.pageNum, this.pageSize);
				if (newProducts.length > 0) {
					this.recommendList = [...this.recommendList, ...newProducts];
				} else {
					this.hasMoreData = false;
				}
			} finally {
				this.isLoading = false;
			}
		},

		/**
		 * 处理滚动事件
		 */
		handleScroll(e) {
			const scrollTop = e.detail.scrollTop;

			// 导航栏透明度逻辑
			if (scrollTop < 100) {
				this.navTransparent = scrollTop;
			} else if (scrollTop < 200) {
				this.navTransparent = 100;
			}

			// 加载更多逻辑
			const scrollHeight = e.detail.scrollHeight;
			const windowHeight = e.detail.windowHeight;

			if (scrollTop + windowHeight >= scrollHeight - 100 && this.hasMoreData) {
				this.loadMoreData();
			}
		},

		/**
		 * 切换推荐标签
		 */
		switchTab(tabId) {
			if (this.currentTab === tabId) return;

			this.currentTab = tabId;
			this.pageNum = 1;
			this.hasMoreData = true;
			this.loadRecommendProductsByTab(tabId);
		},

		/**
		 * 根据标签加载推荐商品
		 */
		async loadRecommendProductsByTab(tabId) {
			try {
				this.isLoading = true;
				// 重置分页
				this.pageNum = 1;
				this.hasMoreData = true;

				// 调用真实API获取产品数据
				let productData = [];

				// 对于普通用户，所有标签都应该显示用户可见的产品（isAllowCall=3）
				// 在客户端进行不同的排序和过滤来模拟不同标签的效果
				const userProducts = await getProductList();
				productData = userProducts.data || [];

				console.log(`加载${tabId}标签产品数据:`, productData.length, '个产品');

				// 根据不同tab对数据进行客户端过滤和排序
				switch (tabId) {
					case 'all':
						// 显示所有用户可见的产品，按默认顺序
						break;
					case 'new':
						// 按创建时间排序，显示最新产品
						productData = this.sortProductsByDate(productData, 'new');
						break;
					case 'hot':
						// 按某种热度指标排序（这里暂时按状态排序）
						productData = this.sortProductsByPopularity(productData);
						break;
					case 'discount':
						// 显示有优惠的产品（这里暂时显示所有产品）
						productData = this.filterDiscountProducts(productData);
						break;
				}

				// 转换后端数据格式为前端需要的格式
				this.recommendList = this.formatProductData(productData);
				console.log('推荐列表', this.recommendList);

			} catch (error) {
				console.error('加载推荐商品失败:', error);
				// 失败时使用模拟数据作为备选
				this.recommendList = this.generateRecommendProducts(1, this.pageSize);
			} finally {
				this.isLoading = false;
			}
		},

		/**
		 * 格式化后端产品数据为前端展示格式
		 * 注意：返回的数据结构应该与ProductCard组件兼容
		 */
		formatProductData(productData) {
			if (!Array.isArray(productData)) {
				return [];
			}

			return productData.map(item => {
				// 根据PVO结构解析数据
				let productInfo = {};

				// 优先使用三类商家数据
				const productItem = item.p3;

				if (productItem && productItem.productSpu) {
					const spu = productItem.productSpu;
					const sku = productItem.productSku;

					productInfo = {
						id: spu.id,
						name: spu.name || '暂无名称',
						price: item.totalPrice || '0.00',
						sales: Math.floor(Math.random() * 1000), // 后端暂无销量字段，使用随机数
						// 同时提供多个图片字段以兼容ProductCard组件
						imageUrl: spu.mainImage || IMAGE_URL,
						mainImage: spu.mainImage || IMAGE_URL, // 添加mainImage字段
						ImageUrl: spu.mainImage || IMAGE_URL,  // 添加ImageUrl字段（兼容旧版本）
						merchantId: spu.merchantId,
						status: spu.status,
						description: sku?.title || ''
					};
				} else {
					// 如果没有找到有效的产品数据，使用默认值
					productInfo = {
						id: Math.random(),
						name: '暂无产品信息',
						price: '0.00',
						sales: 0,
						imageUrl: IMAGE_URL,
						mainImage: IMAGE_URL,
						ImageUrl: IMAGE_URL
					};
				}

				return productInfo;
			});
		},

		/**
		 * 生成推荐商品数据（备用方法）
		 */
		generateRecommendProducts(page, size) {
			const products = [];

			for (let i = 0; i < size; i++) {
				const index = (page - 1) * size + i + 1;
				products.push({
					id: index,
					name: `示例商品 ${index} - 这是一个比较长的商品名称，用来测试多行显示效果`,
					price: (Math.random() * 999 + 1).toFixed(2),
					sales: Math.floor(Math.random() * 10000),
					imageUrl: IMAGE_URL,
					mainImage: IMAGE_URL,
					ImageUrl: IMAGE_URL
				});
			}

			return products;
		},

		/**
		 * 按日期排序产品（用于"新品"标签）
		 */
		sortProductsByDate(products, type = 'new') {
			if (!Array.isArray(products)) return [];

			return [...products].sort((a, b) => {
				// 获取产品创建时间
				const getTime = (product) => {
					const productItem = product.p1 || product.p2 || product.p3;
					if (productItem && productItem.productSpu && productItem.productSpu.createdAt) {
						return new Date(productItem.productSpu.createdAt).getTime();
					}
					return 0;
				};

				const timeA = getTime(a);
				const timeB = getTime(b);

				// 新品按创建时间倒序排列（最新的在前）
				return timeB - timeA;
			});
		},

		/**
		 * 按热度排序产品（用于"热销"标签）
		 */
		sortProductsByPopularity(products) {
			if (!Array.isArray(products)) return [];

			return [...products].sort((a, b) => {
				// 根据产品状态和其他指标排序
				const getPopularityScore = (product) => {
					const productItem = product.p1 || product.p2 || product.p3;
					if (productItem && productItem.productSpu) {
						const spu = productItem.productSpu;
						// 上架状态的产品优先级更高
						if (spu.status === 4) return 100;
						if (spu.status === 2) return 50;
						return 0;
					}
					return 0;
				};

				const scoreA = getPopularityScore(a);
				const scoreB = getPopularityScore(b);

				return scoreB - scoreA;
			});
		},

		/**
		 * 过滤优惠产品（用于"优惠"标签）
		 */
		filterDiscountProducts(products) {
			if (!Array.isArray(products)) return [];

			// 目前返回所有产品，后续可以根据实际的优惠字段进行过滤
			// 例如：检查是否有折扣价格、促销活动等
			return products.filter(product => {
				const productItem = product.p1 || product.p2 || product.p3;
				if (productItem && productItem.productSpu) {
					// 这里可以添加优惠相关的判断逻辑
					// 暂时返回所有产品
					return true;
				}
				return false;
			});
		},

		/**
		 * 轮播图切换事件
		 */
		onBannerChange(e) {
			this.currentBannerIndex = e.detail.current;
		},

		/**
		 * 点击轮播图
		 */
		onBannerClick(banner) {
			if (banner && banner.link) {
				// 解析链接，提取path和query
				const url = new URL(banner.link, window.location.origin);
				const path = url.pathname;
				const query = Object.fromEntries(url.searchParams.entries());

				uni.navigateTo({
					url: `${path}?${Object.entries(query).map(([key, value]) => `${key}=${value}`).join('&')}`
				});
			}
		},

		/**
		 * 点击分类
		 */
		onCategoryClick(category) {
			if (category) {
				uni.navigateTo({
					url: `/pages/customer/category?categoryId=${category.id}&categoryName=${category.name}`
				});
			}
		},

		/**
		 * 点击商品
		 */
		onProductClick(id) {
			console.log('点击商品 - ProductID:', id);
			if (id) {
				uni.navigateTo({
					url: `/public/productInfo/productInfo?spuId=${id}`
				});
			} else {
				console.error('商品ID为空，无法跳转');
				uni.showToast({
					title: '商品信息错误',
					icon: 'none'
				});
			}
		},

		/**
		 * 搜索按钮点击
		 */
		handleSearch() {
			uni.showToast({
				title: '搜索功能',
				icon: 'none'
			});
		},

		/**
		 * 地图按钮点击
		 */
		handleMap() {
			uni.showToast({
				title: '地图功能',
				icon: 'none'
			});
		},

		/**
		 * 更多按钮点击
		 */
		handleMore() {
			uni.showToast({
				title: '更多功能',
				icon: 'none'
			});
		},

		/**
		 * 定位按钮点击
		 */
		handleTarget() {
			uni.showToast({
				title: '定位功能',
				icon: 'none'
			});
		},

		/**
		 * 初始化系统信息（参照 AdaptiveNavBar 的方式）
		 */
		initSystemInfo() {
			try {
				// 获取系统信息
				this.systemInfo = uni.getSystemInfoSync();

				// 设置状态栏高度
				this.statusBarHeight = this.systemInfo.statusBarHeight || 0;

				// 获取胶囊按钮信息
				this.capsuleInfo = uni.getMenuButtonBoundingClientRect();
				console.log('胶囊按钮信息:', this.capsuleInfo);

				// 计算导航栏高度（参照 AdaptiveNavBar 的方式）
				this.calculateNavbarHeight();

				console.log('系统信息初始化成功:', {
					systemInfo: this.systemInfo,
					statusBarHeight: this.statusBarHeight,
					capsuleInfo: this.capsuleInfo,
					navbarHeight: this.navbarHeight
				});
			} catch (e) {
				console.error('获取系统信息失败:', e);
				// 设置默认值
				this.systemInfo = {};
				this.statusBarHeight = 20;
				this.capsuleInfo = {
					left: 10,
					right: 10,
					top: 10,
					bottom: 10,
					width: 87,
					height: 32
				};
				this.navbarHeight = 44;
			}
		},
		/**
		 * 计算导航栏高度（参照 AdaptiveNavBar 的方式）
		 */
		calculateNavbarHeight() {
			if (this.capsuleInfo && this.capsuleInfo.height && this.capsuleInfo.top) {
				// 胶囊按钮高度 + (胶囊top - 状态栏高度) * 2
				this.navbarHeight = this.capsuleInfo.height + (this.capsuleInfo.top - this.statusBarHeight) * 2;
			} else {
				// 默认高度
				this.navbarHeight = 44;
			}
			console.log('导航栏高度计算:', {
				capsuleHeight: this.capsuleInfo?.height,
				capsuleTop: this.capsuleInfo?.top,
				statusBarHeight: this.statusBarHeight,
				navbarHeight: this.navbarHeight
			});
		},
		/**
		 * 点击地址区域
		 */
		handleLocationClick() {
			// 位置功能已移除
		},

		/**
		 * 计算导航栏右侧边距（使用胶囊按钮宽度 + 40）
		 */
		calculateNavRightPadding() {
			try {
				// 获取系统信息
				const systemInfo = uni.getSystemInfoSync();

				// 获取胶囊按钮信息
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect();

				console.log('=== 计算导航栏右侧边距 ===');
				console.log('系统信息:', systemInfo);
				console.log('胶囊按钮信息:', menuButtonInfo);

				if (!menuButtonInfo || !systemInfo) {
					console.warn('胶囊按钮或系统信息获取失败');
					this.navRightPadding = '200rpx';
					return;
				}

				// 检查胶囊按钮width是否有效
				if (menuButtonInfo.width === undefined || menuButtonInfo.width === null) {
					console.warn('胶囊按钮width属性无效:', menuButtonInfo);
					this.navRightPadding = '200rpx';
					return;
				}

				// 获取胶囊按钮宽度（px）
				const capsuleWidthPx = menuButtonInfo.width;

				// 转换为rpx：750rpx = systemInfo.windowWidth px
				const windowWidthPx = systemInfo.windowWidth;
				const pixelRatio = 750 / windowWidthPx;
				const capsuleWidthRpx = capsuleWidthPx * pixelRatio;

				// 右侧margin = 胶囊宽度
				this.navRightPadding = capsuleWidthRpx + 'rpx';

				// 更新胶囊按钮信息
				if (menuButtonInfo) {
					this.capsuleInfo = menuButtonInfo;
					// 重新计算导航栏高度
					this.calculateNavbarHeight();
					console.log('导航栏信息更新:', {
						capsuleInfo: this.capsuleInfo,
						navbarHeight: this.navbarHeight
					});
				}

				console.log('导航栏右侧边距计算成功:', {
					windowWidth: windowWidthPx,
					capsuleWidth: capsuleWidthPx,
					capsuleWidthRpx: capsuleWidthRpx,
					capsuleHeight: this.capsuleHeight,
					capsuleTop: menuButtonInfo.top,
					capsuleBottom: menuButtonInfo.top + menuButtonInfo.height,
					rightMargin: this.navRightPadding
				});

				// 强制更新视图，确保样式生效
				this.$forceUpdate();
			} catch (e) {
				console.error('计算导航栏右侧边距失败:', e);
				this.navRightPadding = '200rpx'; // 默认值
			}
		},
	}
};
</script>

<style lang="scss">
.app-container {
	width: 100%;
	height: 100vh;
	background-color: #f5f5f5;
}

.content-wrapper {
	width: 100%;
	height: calc(100vh);
	overflow-y: auto;
	padding-top: 20rpx;
	padding-bottom: 120rpx;
	/* 为自定义tabbar留出空间 */
	position: relative;
}

/* 轮播图样式 */
.banner-section {
	margin: 0 24rpx 24rpx 24rpx;
	overflow: hidden;
}

.banner-swiper {
	width: 100%;
	height: 380rpx;
}

.banner-image {
	width: 100%;
	height: 100%;
}

/* 商品列表样式 */
.products-container {
	padding: 24rpx;
	margin: 24rpx 24rpx 0;
	background-color: #ffffff;
	border-radius: 12rpx;
}

.product-it {
	padding: 18rpx 0;
}

/* 热门产品样式 */
.hot-products-section {
	margin: 24rpx;
	background-color: #ffffff;
	border-radius: 24rpx;
}

.hot-products-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16rpx;
}

.hot-product-card {
	overflow: hidden;
	transition: all 0.3s ease;

	&:active {
		transform: scale(0.98);
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
	}
}

.hot-product-image {
	width: 100%;
	height: 280rpx;
	background-color: #f5f5f5;
}

.hot-product-info {
	padding: 16rpx;
	display: flex;
	flex-direction: column;
}

.hot-product-title {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
	margin-bottom: 12rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hot-product-tags {
	display: flex;
	gap: 8rpx;
	margin-bottom: 12rpx;
}

.hot-tag {
	font-size: 22rpx;
	padding: 4rpx 12rpx;
	border-radius: 4rpx;
	color: #fff;

	&.green {
		background: #78A329;
	}

	&.blue {
		background: #007AFF;
	}
}

.hot-product-price {
	font-size: 32rpx;
	font-weight: bold;
	color: #FF4444;
}

/* 探索区域样式 */
.explore-section {
	margin: 24rpx 24rpx 24rpx 24rpx;
}

.section-title-box {
	margin-bottom: 30rpx;
	padding-left: 26rpx;
	position: relative;

	&:before {
		position: absolute;
		content: "";
		display: block;
		left: 0;
		top: 0;
		height: 36rpx;
		width: 12rpx;
		border-radius: 6rpx;
		transform: translateY(-50%);
		top: 50%;
	}

	&.bg-yellow {
		&:before {
			background: #f37b1d;
		}
	}

	&.bg-green {
		&:before {
			background: #39b54a;
		}
	}
}

.section-title-text {
	font-size: 32rpx;
	color: #333;
	font-weight: 700;
}

.explore-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16rpx;
}

.explore-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 12rpx;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;

	&:active {
		transform: scale(0.95);
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
	}
}

.explore-image {
	width: 100%;
	height: 150rpx;
	background-color: #f5f5f5;
}

.explore-name {
	width: 100%;
	padding: 16rpx 8rpx;
	font-size: 26rpx;
	color: #333;
	text-align: center;
	background: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.brand-banner {
	margin-bottom: 24rpx;
}

.brand-banner-image {
	width: 100%;
	height: 180rpx;
	border-radius: 16rpx;
}

.brand-list {
	display: flex;
	justify-content: space-between;
}

.brand-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 22%;
}

.brand-logo {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	margin-bottom: 12rpx;
	background-color: #f8f8f8;
}

.brand-name {
	font-size: 26rpx;
	color: #333;
}

/* 加载更多样式 */
.load-more {
	padding: 24rpx 0;
	text-align: center;
}

.loading-text {
	font-size: 26rpx;
	color: #999;
}

.no-more-data {
	padding: 24rpx 0;
	text-align: center;
}

.no-more-text {
	font-size: 26rpx;
	color: #999;
}

/* 错误状态样式 */
.error-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 120rpx 0;
}

.error-text {
	font-size: 30rpx;
	color: #999;
	margin: 24rpx 0;
}

/* 通用样式 */
.card {
	background: white;
	border-radius: 24rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}



/* uview导航栏相关样式 */
/* 调整 u-navbar__content 与胶囊按钮上下居中 */
:deep(.u-navbar__content) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* 根据胶囊按钮位置调整垂直对齐 */
	position: relative;
}

/* 如果胶囊按钮信息可用，使用动态样式调整 */
.nav-left {
	display: flex;
	align-items: center;
	color: #333;
	// padding-left: 32rpx;
	/* 与胶囊按钮左对齐 */
	/* 高度和行高通过动态样式控制，确保与胶囊按钮对齐 */
	/* 确保内容与胶囊按钮同一水平 */
	box-sizing: border-box;
}

.nav-center {
	display: flex;
	align-items: center;
	justify-content: center;
	/* 高度和行高通过动态样式控制，确保与胶囊按钮对齐 */
}

.nav-right {
	/* 确保右侧按钮区域与胶囊按钮高度一致 */
	box-sizing: border-box;
}

.nav-location-text {
	color: #333;
	margin-left: 8rpx;
	font-size: 26rpx;
}

.nav-right {
	display: flex;
	align-items: center;
	gap: 12rpx;
	/* padding-right 通过动态样式绑定 */
	/* 右侧空出胶囊按钮的位置 */
}

.nav-action-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f5f5f5;
	border-radius: 8rpx;
	transition: all 0.2s ease;
}

.nav-action-btn:active {
	opacity: 0.7;
	transform: scale(0.95);
}

.nav-action-btn-circle {
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
}

.nav-action-btn-rect {
	height: 64rpx;
	padding: 0 24rpx;
	// border: 1rpx solid #e0e0e0;
	background: #F2F2F2;
	border-radius: 32rpx;
	color: #999999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-action-text {
	font-size: 26rpx;
	color: #999999;
	margin-left: 6rpx;
}
</style>